<template>
  <div class="col-md-4">
    <form class="form-horizontal" >
        <div class="form-group">
            <label>用户名</label>
            <input type="text" class="form-control" placeholder="用户名" v-model="userName">
        </div>
        <div class="form-group">
            <label>评论内容</label>
            <textarea class="form-control" rows="6" placeholder="评论内容" v-model="commentContent"></textarea>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="button" class="btn btn-default pull-right" @click="SubmitComment">提交</button>
            </div>
        </div>
    </form>
  </div>
</template>

<script>
export default {
  name: 'Left',
  props:{
    addComment:Function,
  },
  data(){
    return{
      userName:'',
      commentContent:'',
    }
  },
  methods:{
    SubmitComment(){
      // 创建一个对象
      const userName = this.userName.trim();
      const commentContent = this.commentContent.trim();
      console.log(commentContent);
      if(!userName || !commentContent){
        this.userName = '';
        this.commentContent = '';
        alert("用户名或者评论不能为空");
        return
      }
      const comment = {
        userName,
        commentContent
      }
      this.addComment(comment);
      this.userName = '';
      this.commentContent = '';
    }
  }
}
</script>

<style scoped>

</style>
